<template>
    <header>
        <div class="header-section">
            <div class="header-logo">
                <img src="/favicon.ico" alt="" />
            </div>
            <div class="header-company">text</div>
        </div>
        <div class="header-section"></div>
        <div class="header-section"></div>
    </header>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
//@use "@/assets/style/silver-viewport.sass";
$header_height: 3rem;

/* ----------------H E A D E R--------------- */
header {
    height: $header_height;
    padding: 0 0.75rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-section {
        display: flex;
        align-items: center;
    }

    .header-logo {
        width: 2.25rem;
        height: 2.25rem;
        margin-right: 0.5rem;

        img {
            width: inherit;
        }
    }

    .header-company {
        line-height: $header_height;
        text-align: center;
        vertical-align: center;
        font-size: 1.25rem;
        font-weight: 550;
        //color: #1f1f1f;
        color: whitesmoke;
    }
}
</style>
